<template>
	<div class="user">
		<div class="crumbs">
	  	  	<el-breadcrumb separator="/">
			  	<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  	<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		  	</el-breadcrumb>
  	  	</div>
  	  	<div class="user-wrap">
  	  		<h3 class="title-wrap">用户管理</h3>
  	  		<div class="user-filter">
  	  			<el-input placeholder="请输入用户名" v-model="input5" style="width: 300px;">
				    <el-button slot="append" icon="search"></el-button>
				    </el-input>
						<el-button type="primary" @click="createDialog = true">创建</el-button>
  	  		</div>
  	  		<div class="user-users">
  	  			<el-table :data="tableData" border style="width: 100%">
				    <el-table-column prop="date" label="添加日期"  sortable></el-table-column>
				    <el-table-column prop="name" label="用户名" sortable></el-table-column>
				    <el-table-column prop="id" label="账号"></el-table-column>
				    <el-table-column prop="tel" label="联系方式"></el-table-column>
				    <el-table-column inline-template :context="_self" label="操作">
				      <span>
				        <el-button @click="" type="text" size="small">删除用户</el-button>
				        <el-button type="text" size="small">修改信息</el-button>
				      </span>
				    </el-table-column>
				  </el-table>
  	  		</div>

					 <!-- create dialog start -->
      <el-dialog title="保存" v-model="createDialog" size="tiny">
        <el-form ref="createFrom" :model="createForm" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="createForm.name" class="el-col-24"></el-input>
          </el-form-item>

          <!--<el-form-item label="添加日期">
            <el-date-picker class="el-col-24" type="datetime" placeholder="选择日期时间"
              v-model="createForm.time">
            </el-date-picker>
          </el-form-item>-->
					
          <el-form-item label="账号">
            <el-input v-model="createForm.id" class="el-col-24"></el-input>
          </el-form-item>
					<el-form-item label="联系方式">
            <el-input v-model="createForm.tel" class="el-col-24"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="createDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleSave()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- create dialog end -->

  	  		<div class="pages">
			    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="	prev, pager, next, jumper" :total="100">
			    </el-pagination>
  			</div>
  	  		
  	  	</div>
	</div>
</template>
<script>
 import axios from 'axios'
export default{
	name: 'user',
    data() {
      return {
				input5:'',
        currentPage:0,
				createDialog: false,
				createForm: {
					name: '',
					tel: '',
					id: '',
					Pw:'123'
				},
        tableData: [{
          date: '2016-05-03',
          name: '高伟廷',
          companyName: '北京百度股份有限公司',
          id: '1440624162',
          tel: 13888888888
        }, {
          date: '2016-05-02',
          name: '刘东明',
          companyName: '深圳腾讯有限公司',
          id: '1440624154',
          tel: 13888888888
        }, {
          date: '2016-05-04',
          name: '黄宋杰',
          companyName: '杭州阿里巴巴有限公司',
          id: '1440624163',
          tel: 13888888888
        }, {
          date: '2016-05-01',
          name: '李峻腱',
          companyName: '深圳十方通信息技术股份有限公司',
          id: '1440624159',
          tel: 13888888888
        }, {
          date: '2016-05-06',
          name: '李集集',
          companyName: '大连万达集团',
          id: '1440624167',
          tel: 13888888888
        }]
      }
    },

			methods: {
	    handleSizeChange(val) {
	    	console.log(`每页 ${val} 条`);
	    },
    	handleCurrentChange(val) {
        	this.currentPage = val;
        	console.log(`当前页: ${val}`);
    	},
			handleSave() {
         var params = new URLSearchParams();
					params.append('id',this.createForm.id );
					params.append('Pw',this.createForm.Pw );
					params.append('name',this.createForm.name );
					params.append('tel',this.createForm.tel );
		
					var _this = this
					axios.post('/users/handleSave',params).then(function (res) {
							if(res.data.result){
									console.log(res.data.result);
									_this.$router.push({path:'',query:{username:res.data.username}})
								//	_this.changeBtn();
								alert("成功");
								this.createDialog = false;
							}else{
									alert("404")
							}
					}).catch(function (err) {
							console.log(err);
					})
					//this.$store.commit("changeStyle",4);
			}
    }

}	
</script>
<style>
/*@import '../styles/public.less';*/
.user{
	background-color: @white;
	padding-bottom: 200px;
	.user-wrap{
		border-left: solid 1px @borderColor;
		border-right: solid 1px @borderColor;
		border-bottom: solid 1px @borderColor;
		margin: 15px;
		border-top-left-radius: 4px;
    	border-top-right-radius: 4px;
    	.user-filter{
    		padding: 100px 0;
    		.el-input{
    			width: 40%!important;
    			margin: 0 auto;
    		}
    	}
    	.user-users{
    		margin-bottom: 100px;
    	}
    	.title-wrap{
			border-left: none;
			border-right: none;
		}
		.pages{
			padding: 50px 0;
			text-align: center;
		}
	}
}	
</style>